import React, { useEffect, useState } from 'react';
import OpenSeaDragon from "openseadragon";
import { Button } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import { history } from 'umi'

const theProps = (state) => {
    return {
        id: state.maps.mapsId,
        mapsInfo: state.maps?.mapsInfo[0],
        mapIframe: state.maps?.mapIframe
    }
}

function Maps(props) {
    const { mapsInfo, dispatch, id, mapIframe, history } = props;

    useEffect(() => {
        dispatch({
            type: 'maps/getInfo',
            payload: id
        })
        // history.block(() => {
        //     dispatch({
        //         type: 'maps/repairResult',
        //         payload: id
        //     })
        // })
        return () => { 
        }
    }, [dispatch, id]);
    useEffect(() => {
        dispatch({
            type: 'maps/displayMap',
            payload: id
        })
    }, [dispatch, id, mapsInfo])
    const handleStartTask = () => {
        dispatch({
            type: 'task/saveCurrent',
            payload: 0
        })
        router.push({
            pathname: '/work/task',
            search: `${props.location.search?.slice(1)}`
        })
    }

    return (
        <div
            style={{
                height: "60vh",
                minWidth: '70vw'
            }}
        >
            {/* <Button type="primary" style={{ marginRight: '1em', marginBottom: '1em' }} id="full-page" >全屏预览</Button> */}
            <Button type="primary" style={{ float: 'right', marginBottom: '1em' }} onClick={() => handleStartTask()} >开始任务</Button>
            <iframe
                title="resg"
                style={{
                    border: '0px', marginTop: '10vh', height: "100%",
                    width: "100%"
                }}
                sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                scrolling="auto"
                allowfullscreen="true"
                src={mapIframe}
            />

        </div>
    )
}

export default connect(theProps, null)(Maps)
